import React, { Component } from "react";

export default class Form extends Component {
  constructor() {
    super();
    this.state = {
      username: {
        value: "",
        tip: "请输入数字字母_$组成不能以数字开头长度6到10位",
        className: "error",
        reg: /^[a-z_$][0-9_$a-z]{5,9}$/i,
      },
      userpwd: {
        value: "",
        tip: "请输出数字字母组成长度6到12位",
        className: "error",
        reg: /^[a-z0-9]{6,12}$/i,
      }, //密码
      usertel: {
        value: "",
        tip: "请输入常用的手机号",
        className: "error",
        reg: /^1[3-9][0-9]{9}$/,
      }, //手机号
    };
  }
  checkAttr = (attr, value, tip) => {
    //设置用户名
    if (this.state[attr].reg.test(value)) {
      //测试内容是否合法
      this.setState({
        [attr]: {
          ...this.state[attr],
          value,
          tip: "√",
          className: "success",
        },
      });
    } else {
      this.setState({
        [attr]: {
          ...this.state[attr],
          value,
          tip,
          className: "error",
        },
      });
    }
  };

  checkeUserpwd = (attr, value, tip) => {
    //设置用户名
    if (this.state[attr].reg.test(value)) {
      //测试内容是否合法
      // this.setState({
      //   [attr]: {
      //     ...this.state[attr],
      //     value,
      //     tip: "√",
      //     className: "success",
      //   },
      // });
      //密码已经合法
      //判断强度(三类 小写 大写  数字)  只有一个类为弱  两类为中  三类为强
      let numReg = /[0-9]/;
      let lowReg = /[a-z]/;
      let uppReg = /[A-Z]/;
      let total = numReg.test(value) + lowReg.test(value) + uppReg.test(value);
      let tip = "";
      switch (total) {
        case 2:
          tip = "<button style='width:100px'>中</button>";
          break;
        case 3:
          tip = "<button style='width:150px'>强</button>";
          break;
        default:
          tip = "<button style='width:50px'>弱</button>";
      }
      this.setState({
        [attr]: {
          ...this.state[attr],
          value,
          tip,
          className: "success",
        },
      });
    } else {
      this.setState({
        [attr]: {
          ...this.state[attr],
          value,
          tip,
          className: "error",
        },
      });
    }
  };

  submit = () => {
    if (
      this.state.username.className === "success" &&
      this.state.userpwd.className === "success" &&
      this.state.usertel.className === "success"
    ) {
      alert("验证成功");
    } else {
      alert("验证失败");
    }
  };
  render() {
    return (
      <div>
        <div>
          用户名称
          <input
            value={this.state.username.value}
            onChange={(e) => {
              this.checkAttr(
                "username",
                e.target.value,
                "请输入数字字母_$组成不能以数字开头长度6到10位"
              );
            }}
          />
          <span className={this.state.username.className}>
            {this.state.username.tip}
          </span>
        </div>

        <div>
          密码{" "}
          <input
            value={this.state.userpwd.value}
            onChange={(e) => {
              this.checkeUserpwd(
                "userpwd",
                e.target.value,
                "请输出数字字母组成长度6到12位"
              );
              // this.checkAttr("userpwd",e.target.value,"请输出数字字母组成长度6到12位");
            }}
          />
          <span className={this.state.userpwd.className} dangerouslySetInnerHTML={{__html:this.state.userpwd.tip}}>
          
          </span>
        </div>
        <div>
          手机号{" "}
          <input
            value={this.state.usertel.value}
            onChange={(e) => {
              this.checkAttr("usertel", e.target.value, "请输入常用的手机号");
            }}
          />
          <span className={this.state.usertel.className}>
            {this.state.usertel.tip}
          </span>
        </div>

        <button
          onClick={() => {
            this.submit();
          }}
        >
          验证
        </button>
      </div>
    );
  }
}
